<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
	<div>根据radio改变内容:
		<div id="radio">
			<input id="red" type="radio" name="radio">红色
			<input id="yellow" type="radio" name="radio">黄色
			<input id="blue" type="radio" name="radio">蓝色
			<input id="yellowgreen" type="radio" name="radio">绿色
		</div>
		<div class="box">
			<div style="width:200px;height:200px;background:red;display:none;"></div>
			<div style="width:200px;height:200px;background:yellow;display:none;"></div>
			<div style="width:200px;height:200px;background:blue;display:none;"></div>
			<div style="width:200px;height:200px;background:yellowgreen;display:none;"></div>
		</div>
	</div>
</body>
<script src="http://www.bhu.ac.cn/js/jquery.1.8.3.js" type="text/javascript"></script>
<script type="text/javascript">
	$(document).ready(function (argument){
		$(':radio').click(function(){
			var index = $(this).index();
			$(".box div").eq(index).show().siblings('div').hide();
		})
	})
</script>
</html>